---
import ItemContent from "@components/style/ItemContent.astro";
---

<link
  type="text/css"
  rel="stylesheet"
  th:href="${'/'+themeName+'/static/plug/highlight/styles/base16/atelier-heath-combined.css'}"
/>

<th:block th:if="${article.articleBuild== 0}">
  <script th:src="${'/'+themeName+'/static/plug/highlight/highlight.min.js'}"
  ></script>
</th:block>

<script>
  import scrollManager from "@/utils/scrollManager.js";
  import buildToc from "@/utils/tocTree.js";
  const catalog = new buildToc(
    "article-content",
    "H1,H2,H3,H4,H5,H6",
    "op-",
  ).getTree();

  /**
   * 递归生成目录HTML
   * @param {Array} items 目录项数组
   * @param {string} activeId 当前选中项ID
   * @param {string} parentClass 父容器class
   * @returns {string} HTML字符串
   */
  function generateCatalogHTML(
    items,
    activeId = "",
    parentClass = "md-editor-catalog-container",
  ) {
    let html = `<div class="${parentClass}">`;
    items.forEach((item) => {
      const isActive = item.id === activeId;
      html += `
            <div class="md-editor-catalog-link ${isActive ? "md-editor-catalog-active" : ""}" 
                 data-id="${item.id}">
                <span title="${item.text}">${item.text}</span>
        `;
      if (item.children && item.children.length > 0) {
        html += generateCatalogHTML(
          item.children,
          activeId,
          "md-editor-catalog-wrapper",
        );
      }
      html += `</div>`;
    });
    return html + `</div>`;
  }

  /**
   * 初始化目录
   */
  function initCatalog() {
    const container = document.getElementById("aside-catalog-box");
    if (!container) {
      console.warn("目录容器不存在");
      return;
    }

    const catalogHTML = `
        <div class="md-editor-catalog md-editor-catalog-editor dark:md-editor-catalog-dark md-editor-catalog-flat">
            <div class="md-editor-catalog-indicator"></div>
            ${generateCatalogHTML(catalog)}
        </div>
    `;
    container.innerHTML = catalogHTML;

    const indicator = document.querySelector(".md-editor-catalog-indicator");
    const links = document.querySelectorAll(".md-editor-catalog-link");

    if (!indicator || links.length === 0) return;

    // 绑定点击事件处理函数
    const handleLinkClick = (e, link) => {
      e.stopPropagation();
      // 移除所有激活状态
      links.forEach((el) => el.classList.remove("md-editor-catalog-active"));
      // 添加当前激活状态
      link.classList.add("md-editor-catalog-active");
      indicator.style.top = `${link.offsetTop + link.offsetHeight / 2 - 10}px`;
      indicator.style.opacity = "1";
      // 滚动到目标位置
      const id = link.dataset.id;
      const target = document.getElementById(id);
      if (target) {
        target.scrollIntoView({ behavior: "smooth" });
      }
    };

    // 为所有链接添加点击事件
    links.forEach((link) => {
      link.addEventListener("click", (e) => handleLinkClick(e, link));
    });

    // 使用scrollManager注册滚动事件监听器
    scrollManager.register("contentBoxCatalog", handleScroll, {
      useDebounce: true,
      debounceTime: 100,
    });

    // 组件卸载时清理事件监听器
    const cleanup = () => {
      scrollManager.unregister("contentBoxCatalog");
    };

    // 监听页面卸载事件以清理监听器
    window.addEventListener("beforeunload", cleanup);

    // 暴露清理函数供外部调用
    return cleanup;
  }

  /**
   * 处理滚动事件
   * @param {number} scrollTop - 当前滚动位置（由scrollManager传入）
   */
  function handleScroll(scrollTop) {
    // 缓存DOM元素引用，避免重复查询
    const indicator = document.querySelector(".md-editor-catalog-indicator");
    const links = document.querySelectorAll(".md-editor-catalog-link");
    const catalogBox = document.getElementById("aside-catalog-box");
    const progressBar = document.getElementById("reading-progress");
    const progressText = document.getElementById("progress-percentage");

    // 计算阅读进度
    if (progressBar && progressText) {
      // 获取文章内容元素
      const articleContent = document.getElementById("article-content");
      if (articleContent) {
        // 获取文章内容高度和视口高度
        const contentHeight = articleContent.scrollHeight;
        const winHeight = window.innerHeight;
        // 计算可滚动距离
        const scrollableDistance = Math.max(contentHeight - winHeight, 0);
        // 计算阅读进度百分比
        let progress = 0;
        if (scrollableDistance > 0) {
          // 获取文章内容相对于视口的位置
          const contentRect = articleContent.getBoundingClientRect();
          // 计算当前滚动位置相对于文章内容的百分比
          const relativeScroll = Math.max(0, -contentRect.top);
          progress = Math.min((relativeScroll / scrollableDistance) * 100, 100);
        }
        // 更新圆形进度条和百分比文本
        progressBar.style.strokeDashoffset = `${100 - progress}`;
        progressText.textContent = `${Math.round(progress)}%`;
      }
    }

    if (!indicator || !catalogBox || links.length === 0) return;

    let activeLink = null;
    const lastActiveLink = document.querySelector(".md-editor-catalog-active");

    // 寻找当前可见的标题
    for (const link of links) {
      const targetId = link.dataset.id;
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        const targetRect = targetElement.getBoundingClientRect();
        // 调整判断逻辑：标题顶部进入视口上半部分，且底部未完全离开视口
        if (targetRect.top <= 300 && targetRect.bottom >= 0) {
          activeLink = link;
          break;
        }
      }
    }

    // 更新激活状态和指示器位置
    if (activeLink) {
      // 避免不必要的DOM操作
      if (activeLink !== lastActiveLink) {
        links.forEach((link) =>
          link.classList.remove("md-editor-catalog-active"),
        );
        activeLink.classList.add("md-editor-catalog-active");
      }
      // 简化计算：使用相对于父容器的偏移量，确保指示器始终对齐链接
      indicator.style.top = `${activeLink.offsetTop + 5}px`;
      indicator.style.opacity = "1";
    } else if (lastActiveLink) {
      // 如果没有新的激活项，保持最后一个激活项的状态
      indicator.style.top = `${lastActiveLink.offsetTop + 5}px`;
      indicator.style.opacity = "0.5"; // 降低透明度表示非激活状态
    } else {
      indicator.style.opacity = "0";
    }
  }

  // 确保 DOM 完全加载后执行
  document.addEventListener("DOMContentLoaded", () => {
    const cleanup = initCatalog();
    // 不需要再次添加滚动事件监听器，因为 initCatalog 中已经添加了
  });
</script>

<link
  type="text/css"
  rel="stylesheet"
  th:href="${'/'+themeName+'/static/plug/katex/katex.min.css'}"
/>
<script th:src="${'/'+themeName+'/static/plug/katex/katex.min.js'}"></script>

<style is:global>
  .md-editor-preview {
    overflow: visible !important;
  }

  .md-editor .md-editor-preview {
    --md-theme-color: var(--md-color);
    --md-theme-color-reverse: #eee;
    --md-theme-color-hover: #eee;
    --md-theme-color-hover-inset: #ddd;
    --md-theme-link-color: #2d8cf0;
    --md-theme-link-hover-color: #73d13d;
    --md-theme-border-color: #e6e6e6;
    --md-theme-border-color-reverse: #bebebe;
    --md-theme-border-color-inset: #d6d6d6;
    --md-theme-bg-color: #fff;
    --md-theme-bg-color-inset: #ececec;
    --md-theme-code-copy-tips-color: inherit;
    --md-theme-code-copy-tips-bg-color: #fff;
    --md-theme-code-active-color: #61aeee;
    --md-theme-radius-s: 2px;
    --md-theme-radius-m: 5px;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-preview {
    --md-theme-color: var(--md-color);
    --md-theme-color-reverse: #222;
    --md-theme-color-hover: #191919;
    --md-theme-color-hover-inset: #444;
    --md-theme-link-color: #2d8cf0;
    --md-theme-link-hover-color: #73d13d;
    --md-theme-border-color: #2d2d2d;
    --md-theme-border-color-reverse: #e6e6e6;
    --md-theme-border-color-inset: #5a5a5a;
    --md-theme-bg-color: #000;
    --md-theme-bg-color-inset: #111;
    --md-theme-code-copy-tips-color: inherit;
    --md-theme-code-copy-tips-bg-color: #3a3a3a;
    --md-theme-code-active-color: #e6c07b;
    --md-theme-radius-s: 2px;
    --md-theme-radius-m: 5px;
  }

  .md-editor .md-editor-admonition-note {
    --md-admonition-color: #212121;
    --md-admonition-bg-color: #fff;
    --md-admonition-border-color: #a6a6a6;
  }

  .md-editor .md-editor-admonition-tip {
    --md-admonition-color: #616161;
    --md-admonition-bg-color: #f5f5f5;
    --md-admonition-border-color: #bababa;
  }

  .md-editor .md-editor-admonition-info {
    --md-admonition-color: #424242;
    --md-admonition-bg-color: #f0f0f0;
    --md-admonition-border-color: #aaa;
  }

  .md-editor .md-editor-admonition-quote {
    --md-admonition-color: #455a64;
    --md-admonition-bg-color: #eceff1;
    --md-admonition-border-color: #a9b3b9;
  }

  .md-editor .md-editor-admonition-abstract {
    --md-admonition-color: #0288d1;
    --md-admonition-bg-color: #e1f5fe;
    --md-admonition-border-color: #88c9ec;
  }

  .md-editor .md-editor-admonition-attention {
    --md-admonition-color: #1e88e5;
    --md-admonition-bg-color: #e3f2fd;
    --md-admonition-border-color: #94c8f3;
  }

  .md-editor .md-editor-admonition-example {
    --md-admonition-color: #5e35b1;
    --md-admonition-bg-color: #ede7f6;
    --md-admonition-border-color: #b4a0da;
  }

  .md-editor .md-editor-admonition-hint {
    --md-admonition-color: #00897b;
    --md-admonition-bg-color: #e0f2f1;
    --md-admonition-border-color: #86c8c2;
  }

  .md-editor .md-editor-admonition-success {
    --md-admonition-color: #388e3c;
    --md-admonition-bg-color: #e8f5e9;
    --md-admonition-border-color: #a2cca4;
  }

  .md-editor .md-editor-admonition-question {
    --md-admonition-color: #f9a825;
    --md-admonition-bg-color: #fffde7;
    --md-admonition-border-color: #fddb99;
  }

  .md-editor .md-editor-admonition-caution {
    --md-admonition-color: #fb8c00;
    --md-admonition-bg-color: #fff8e1;
    --md-admonition-border-color: #fdcd87;
  }

  .md-editor .md-editor-admonition-warning {
    --md-admonition-color: #f57c00;
    --md-admonition-bg-color: #fff3e0;
    --md-admonition-border-color: #fbc386;
  }

  .md-editor .md-editor-admonition-danger {
    --md-admonition-color: #d84315;
    --md-admonition-bg-color: #ffebee;
    --md-admonition-border-color: #efa897;
  }

  .md-editor .md-editor-admonition-failure {
    --md-admonition-color: #d32f2f;
    --md-admonition-bg-color: #fee2e6;
    --md-admonition-border-color: #ed9a9d;
  }

  .md-editor .md-editor-admonition-bug {
    --md-admonition-color: #c31a1a;
    --md-admonition-bg-color: #fddadd;
    --md-admonition-border-color: #e68d8f;
  }

  .md-editor .md-editor-admonition-error {
    --md-admonition-color: #b71c1c;
    --md-admonition-bg-color: #fdd2d6;
    --md-admonition-border-color: #e1898c;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-note {
    --md-admonition-color: #e0e0e0;
    --md-admonition-bg-color: #1e1e1e;
    --md-admonition-border-color: #6c6c6c;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-tip {
    --md-admonition-color: #b0b0b0;
    --md-admonition-bg-color: #262626;
    --md-admonition-border-color: #5d5d5d;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-info {
    --md-admonition-color: #b3b3b3;
    --md-admonition-bg-color: #2b2b2b;
    --md-admonition-border-color: #616161;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-quote {
    --md-admonition-color: #b0bec5;
    --md-admonition-bg-color: #263238;
    --md-admonition-border-color: #5d6a70;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-abstract {
    --md-admonition-color: #81d4fa;
    --md-admonition-bg-color: #012f45;
    --md-admonition-border-color: #34718d;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-attention {
    --md-admonition-color: #64b5f6;
    --md-admonition-bg-color: #102a4c;
    --md-admonition-border-color: #326290;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-example {
    --md-admonition-color: #9575cd;
    --md-admonition-bg-color: #271b52;
    --md-admonition-border-color: #533f83;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-hint {
    --md-admonition-color: #4db6ac;
    --md-admonition-bg-color: #003d3a;
    --md-admonition-border-color: #1f6d68;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-success {
    --md-admonition-color: #81c784;
    --md-admonition-bg-color: #1b5e20;
    --md-admonition-border-color: #448848;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-question {
    --md-admonition-color: #ffd54f;
    --md-admonition-bg-color: #3e2f00;
    --md-admonition-border-color: #8b7120;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-caution {
    --md-admonition-color: #ffcc80;
    --md-admonition-bg-color: #3e2600;
    --md-admonition-border-color: #8b6833;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-warning {
    --md-admonition-color: #ffb74d;
    --md-admonition-bg-color: #3d2600;
    --md-admonition-border-color: #8b601f;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-danger {
    --md-admonition-color: #ef9a9a;
    --md-admonition-bg-color: #3c0000;
    --md-admonition-border-color: #843e3e;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-failure {
    --md-admonition-color: #ef9a9a;
    --md-admonition-bg-color: #3c0900;
    --md-admonition-border-color: #84433e;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-bug {
    --md-admonition-color: #e68381;
    --md-admonition-bg-color: #300000;
    --md-admonition-border-color: #793434;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-admonition-error {
    --md-admonition-color: #ef5350;
    --md-admonition-bg-color: #300000;
    --md-admonition-border-color: #7c2120;
  }

  .md-editor-preview .md-editor-admonition {
    background-color: var(--md-admonition-bg-color);
    border: 1px solid var(--md-admonition-border-color);
    border-radius: var(--md-theme-radius-m);
    color: var(--md-admonition-color);
    display: flow-root;
    font-size: 14px;
    font-weight: 400;
    margin: 1rem 0;
    padding: 1em 1em 0.5em;
    page-break-inside: avoid;
  }

  .md-editor-preview .md-editor-admonition-title {
    font-weight: 700;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .md-editor-preview .md-editor-admonition p {
    margin: 0.5em 0;
    padding: 0;
  }

  .md-editor-preview .md-editor-admonition p:first-of-type {
    margin-top: 0;
  }

  .md-editor-preview .md-editor-admonition + p:empty,
  .md-editor-preview .md-editor-admonition + p:empty + p:empty {
    display: none;
  }

  .md-editor-preview .md-editor-mermaid {
    line-height: normal;
    overflow: hidden;
  }

  .md-editor-preview .md-editor-mermaid:not([data-processed]) {
    white-space: pre;
  }

  .md-editor-preview [class="md-editor-mermaid"][data-grab] {
    cursor: grab;
  }

  .md-editor-preview [class="md-editor-mermaid"][data-grab]:active {
    cursor: grabbing;
  }

  .md-editor-preview [class="md-editor-mermaid"][data-processed] {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .md-editor-preview [class="md-editor-mermaid"][data-processed] svg {
    transform-origin: top left;
  }

  .md-editor-preview
    [class="md-editor-mermaid"][data-processed]
    .md-editor-mermaid-action {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: opacity 0.3s;
    z-index: 1;
  }

  .md-editor-preview
    [class="md-editor-mermaid"][data-processed]
    .md-editor-mermaid-action
    svg {
    height: 20px;
    width: 20px;
  }

  .md-editor-preview
    [class="md-editor-mermaid"][data-processed]:hover
    .md-editor-mermaid-action {
    opacity: 1;
  }

  .md-editor-katex-block {
    margin: 20px;
    text-align: center;
  }

  .md-editor-katex-block,
  .md-editor-katex-inline {
    display: none;
  }

  .md-editor-katex-inline[data-processed] {
    display: initial;
  }

  .md-editor-katex-block[data-processed] {
    display: block;
  }

  .md-editor .md-editor-preview {
    --md-theme-code-inline-color: #3594f7;
    --md-theme-code-inline-bg-color: rgba(59, 170, 250, 0.1);
    --md-theme-code-inline-radius: var(--md-theme-radius-s);
    --md-theme-code-block-color: #a9b7c6;
    --md-theme-code-block-bg-color: #282c34;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: var(--md-theme-radius-m);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-preview {
    --md-theme-code-inline-color: #3594f7;
    --md-theme-code-inline-bg-color: rgba(59, 170, 250, 0.1);
    --md-theme-code-inline-radius: var(--md-theme-radius-s);
    --md-theme-code-block-color: #a9b7c6;
    --md-theme-code-block-bg-color: #1a1a1a;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: var(--md-theme-radius-m);
  }

  .md-editor-preview code {
    background-color: var(--md-theme-code-inline-bg-color);
    border-radius: var(--md-theme-code-inline-radius);
    color: var(--md-theme-code-inline-color);
    line-height: 22px;
    padding: 2px 4px;
  }

  .md-editor-preview .md-editor-code {
    color: var(--md-theme-code-block-color);
    font-size: 12px;
    line-height: 1;
    margin: 20px 0;
    position: relative;
  }

  .md-editor-preview .md-editor-code input[type="radio"],
  .md-editor-preview .md-editor-code input[type="radio"] + pre,
  .md-editor-preview
    .md-editor-code
    input[type="radio"]
    + span.md-editor-code-lang {
    display: none;
  }

  .md-editor-preview .md-editor-code input:checked + pre,
  .md-editor-preview .md-editor-code input:checked + span.md-editor-code-lang {
    display: block;
  }

  .md-editor-preview .md-editor-code input:checked + label {
    border-bottom: 1px solid;
    color: var(--md-theme-code-active-color);
  }

  .md-editor-preview .md-editor-code .md-editor-code-head {
    background-color: var(--md-theme-code-before-bg-color);
    border-top-left-radius: var(--md-theme-code-block-radius);
    border-top-right-radius: var(--md-theme-code-block-radius);
    display: grid;
    font-size: 12px;
    grid-template: "1fr 1fr";
    height: 32px;
    justify-content: space-between;
    margin-bottom: 0;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    list-style: none;
    position: sticky;
    top: 0;
    z-index: 10000;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head::-webkit-details-marker {
    display: none;
  }

  .md-editor-preview .md-editor-code .md-editor-code-head .md-editor-code-flag {
    margin-left: 12px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-top: 11px;
    width: 10px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    span:first-of-type {
    background-color: #ec6a5e;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    span:nth-of-type(2) {
    background-color: #f4bf4f;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    span:nth-of-type(3) {
    background-color: #61c554;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    span
    + span {
    margin-left: 4px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    ul.md-editor-codetab-label {
    background-color: var(--md-theme-code-block-bg-color);
    box-sizing: border-box;
    margin-top: 8px;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    ul.md-editor-codetab-label
    li {
    display: inline-block;
    line-height: 1;
    list-style: none;
    margin: 0;
    position: relative;
    vertical-align: super;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    ul.md-editor-codetab-label
    li
    label {
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-flag
    ul.md-editor-codetab-label
    li
    + li {
    margin-left: 12px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-action {
    align-items: center;
    display: flex;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-code-action
    > * {
    margin-right: 10px;
  }

  .md-editor-preview .md-editor-code .md-editor-code-head .md-editor-code-lang {
    line-height: 32px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button:not(data-is-icon) {
    cursor: pointer;
    line-height: 32px;
    position: static;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button:not(data-is-icon)
    .md-editor-icon {
    display: inline-block;
    height: 15px;
    vertical-align: sub;
    width: 15px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon] {
    cursor: pointer;
    line-height: 1;
    position: relative;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]
    .md-editor-icon {
    display: inline-block;
    height: 15px;
    vertical-align: sub;
    width: 15px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:before {
    background-color: var(--md-theme-code-copy-tips-bg-color);
    border-radius: var(--md-theme-radius-s);
    box-shadow: 0 0 2px #0003;
    color: var(--md-theme-code-copy-tips-color);
    content: attr(data-tips);
    font-family: sans-serif;
    font-size: 12px;
    left: -10px;
    padding: 4px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-100%, -50%);
    width: -moz-max-content;
    width: max-content;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:after {
    border-color: transparent transparent transparent currentcolor;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    color: var(--md-theme-code-copy-tips-bg-color);
    content: "";
    filter: drop-shadow(4px 0 2px rgba(0, 0, 0, 0.2));
    height: 0;
    left: -10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:after,
  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:before {
    transition: 0.3s;
    visibility: hidden;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:hover:after,
  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-copy-button[data-is-icon]:hover:before {
    visibility: visible;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-collapse-tips {
    margin-right: 12px;
  }

  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-collapse-tips
    .md-editor-icon,
  .md-editor-preview
    .md-editor-code
    .md-editor-code-head
    .md-editor-collapse-tips
    .md-editor-iconfont {
    display: inline-block;
    font-size: 16px;
    height: 16px;
    transform: rotate(0);
    transition: transform 0.1s;
    vertical-align: sub;
    width: 16px;
  }

  .md-editor-preview .md-editor-code pre {
    margin: 0;
    position: relative;
  }

  .md-editor-preview .md-editor-code pre code {
    background-color: var(--md-theme-code-before-bg-color);
    border-bottom-left-radius: var(--md-theme-code-block-radius);
    border-bottom-right-radius: var(--md-theme-code-block-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--md-theme-code-block-color);
    display: block;
    font-family:
      source-code-pro,
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
    font-size: 14px;
    line-height: 1.6;
    overflow: auto;
    padding: 1em;
    position: relative;
  }

  .md-editor-preview .md-editor-code pre code .md-editor-code-block {
    color: var(--md-theme-code-block-color);
    display: inline-block;
    overflow: auto;
    vertical-align: bottom;
    width: 100%;
  }

  .md-editor-preview details.md-editor-code .md-editor-code-head {
    cursor: pointer;
  }

  .md-editor-preview details.md-editor-code:not(open) .md-editor-code-head {
    border-bottom-left-radius: var(--md-theme-code-block-radius);
    border-bottom-right-radius: var(--md-theme-code-block-radius);
  }

  .md-editor-preview details.md-editor-code[open] .md-editor-code-head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .md-editor-preview
    details.md-editor-code[open]
    .md-editor-code-head
    .md-editor-collapse-tips
    .md-editor-icon,
  .md-editor-preview
    details.md-editor-code[open]
    .md-editor-code-head
    .md-editor-collapse-tips
    .md-editor-iconfont {
    transform: rotate(-90deg);
  }

  .md-editor-scrn span[rn-wrapper] {
    counter-reset: linenumber;
    font-size: 100%;
    left: 0;
    letter-spacing: -1px;
    pointer-events: none;
    position: absolute;
    top: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 3em;
  }

  .md-editor-scrn span[rn-wrapper] > span {
    counter-increment: linenumber;
    display: block;
    pointer-events: none;
  }

  .md-editor-scrn span[rn-wrapper] > span:before {
    color: #999;
    content: counter(linenumber);
    display: block;
    padding-right: 0.5em;
    text-align: right;
  }

  .md-editor-scrn pre code {
    padding-left: 3.5em !important;
  }

  .md-editor-preview figure {
    display: inline-flex;
    flex-direction: column;
    margin: 0 0 1em;
    text-align: center;
  }

  .md-editor-preview figure figcaption {
    color: var(--md-theme-color);
    font-size: 0.875em;
    margin-top: 5px;
  }

  .md-editor .md-editor-preview {
    --md-theme-heading-color: var(--md-theme-color);
    --md-theme-heading-border: none;
    --md-theme-heading-1-color: var(--md-theme-heading-color);
    --md-theme-heading-1-border: var(--md-theme-heading-border);
    --md-theme-heading-2-color: var(--md-theme-heading-color);
    --md-theme-heading-2-border: var(--md-theme-heading-border);
    --md-theme-heading-3-color: var(--md-theme-heading-color);
    --md-theme-heading-3-border: var(--md-theme-heading-border);
    --md-theme-heading-4-color: var(--md-theme-heading-color);
    --md-theme-heading-4-border: var(--md-theme-heading-border);
    --md-theme-heading-5-color: var(--md-theme-heading-color);
    --md-theme-heading-5-border: var(--md-theme-heading-border);
    --md-theme-heading-6-color: var(--md-theme-heading-color);
    --md-theme-heading-6-border: var(--md-theme-heading-border);
  }

  .md-editor-preview h1,
  .md-editor-preview h2,
  .md-editor-preview h3,
  .md-editor-preview h4,
  .md-editor-preview h5,
  .md-editor-preview h6 {
    font-weight: 700;
    margin: 1.4em 0 0.8em;
    position: relative;
    word-break: break-all;
  }

  .md-editor-preview h1 a,
  .md-editor-preview h1 a:hover,
  .md-editor-preview h2 a,
  .md-editor-preview h2 a:hover,
  .md-editor-preview h3 a,
  .md-editor-preview h3 a:hover,
  .md-editor-preview h4 a,
  .md-editor-preview h4 a:hover,
  .md-editor-preview h5 a,
  .md-editor-preview h5 a:hover,
  .md-editor-preview h6 a,
  .md-editor-preview h6 a:hover {
    color: inherit;
  }

  .md-editor-preview h1 {
    border-bottom: var(--md-theme-heading-1-border);
    color: var(--md-theme-heading-1-color);
  }

  .md-editor-preview h2 {
    border-bottom: var(--md-theme-heading-2-border);
    color: var(--md-theme-heading-2-color);
  }

  .md-editor-preview h3 {
    border-bottom: var(--md-theme-heading-3-border);
    color: var(--md-theme-heading-3-color);
  }

  .md-editor-preview h4 {
    border-bottom: var(--md-theme-heading-4-border);
    color: var(--md-theme-heading-4-color);
  }

  .md-editor-preview h5 {
    border-bottom: var(--md-theme-heading-5-border);
    color: var(--md-theme-heading-5-color);
  }

  .md-editor-preview h6 {
    border-bottom: var(--md-theme-heading-6-border);
    color: var(--md-theme-heading-6-color);
  }

  .md-editor-preview h1 {
    font-size: 2em;
  }

  .md-editor-preview h2 {
    font-size: 1.5em;
  }

  .md-editor-preview h3 {
    font-size: 1.25em;
  }

  .md-editor-preview h4 {
    font-size: 1em;
  }

  .md-editor-preview h5 {
    font-size: 0.875em;
  }

  .md-editor-preview h6 {
    font-size: 0.85em;
  }

  .md-editor-preview hr {
    border: none;
    border-top: 1px solid var(--md-theme-border-color);
    height: 1px;
    margin: 10px 0;
  }

  .md-editor-preview a {
    color: var(--md-theme-link-color);
    text-decoration: none;
    transition: color 0.1s;
  }

  .md-editor-preview a:hover {
    color: var(--md-theme-link-hover-color);
  }

  .md-editor-preview a:empty:before {
    content: attr(href);
  }

  .md-editor-preview ol,
  .md-editor-preview ul {
    padding-left: 2em;
  }

  .md-editor-preview ol .task-list-item,
  .md-editor-preview ul .task-list-item {
    list-style-type: none;
  }

  .md-editor-preview ol .task-list-item input,
  .md-editor-preview ul .task-list-item input {
    margin-left: -1.5em;
    margin-right: 0.1em;
  }

  .md-editor-preview img {
    max-width: 100%;
  }

  .md-editor-preview p:empty {
    display: none;
  }

  .md-editor .md-editor-preview {
    --md-theme-quote-color: var(--md-theme-color);
    --md-theme-quote-border: none;
    --md-theme-quote-bg-color: inherit;
  }

  .md-editor-preview blockquote {
    background-color: var(--md-theme-quote-bg-color);
    border-left: var(--md-theme-quote-border);
    color: var(--md-theme-quote-color);
    padding: 0 1em;
  }

  .md-editor .md-editor-preview {
    --md-theme-table-stripe-color: #fafafa;
    --md-theme-table-tr-bg-color: inherit;
    --md-theme-table-td-border-color: var(--md-theme-border-color);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .md-editor-preview {
    --md-theme-table-stripe-color: #0c0c0c;
    --md-theme-table-tr-bg-color: inherit;
    --md-theme-table-td-border-color: var(--md-theme-border-color);
  }

  .md-editor-preview table tr {
    background-color: var(--md-theme-table-tr-bg-color);
  }

  .md-editor-preview table tr td,
  .md-editor-preview table tr th {
    border: 1px solid var(--md-theme-table-td-border-color);
  }

  .md-editor-preview table tr:nth-child(2n) {
    background-color: var(--md-theme-table-stripe-color);
  }

  .md-editor-preview {
    color: var(--md-theme-color);
  }

  .md-editor-preview ::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  .md-editor-preview ::-webkit-scrollbar-button:vertical {
    display: none;
  }

  .md-editor-preview ::-webkit-scrollbar-corner,
  .md-editor-preview ::-webkit-scrollbar-thumb,
  .md-editor-preview ::-webkit-scrollbar-track {
    border-radius: 2px;
  }

  .md-editor .md-editor-preview ::-webkit-scrollbar-corner,
  .md-editor .md-editor-preview ::-webkit-scrollbar-track {
    background-color: #e2e2e2;
  }

  .md-editor .md-editor-preview ::-webkit-scrollbar-thumb {
    background-color: #0000004d;
  }

  .md-editor .md-editor-preview ::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #00000059;
  }

  .md-editor .md-editor-preview ::-webkit-scrollbar-thumb:vertical:active {
    background-color: #00000061;
  }

  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-preview
    ::-webkit-scrollbar-corner,
  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-preview
    ::-webkit-scrollbar-track {
    background-color: #0f0f0f;
  }

  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-preview
    ::-webkit-scrollbar-thumb {
    background-color: #2d2d2d;
  }

  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-preview
    ::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #3a3a3a;
  }

  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-preview
    ::-webkit-scrollbar-thumb:vertical:active {
    background-color: #3a3a3a;
  }

  .md-editor div.default-theme {
    --md-theme-code-copy-tips-color: #141414;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.default-theme {
    --md-theme-code-copy-tips-color: inherit;
  }

  div.default-theme img {
    box-sizing: border-box;
    margin: 0 auto;
  }

  div.default-theme a {
    border-bottom: none;
    display: inline-flex;
    line-height: 1;
  }

  div.default-theme a:hover {
    border-bottom: 1px solid;
  }

  div.default-theme a[target="_blank"] {
    align-items: center;
  }

  div.default-theme a[target="_blank"]:after {
    background-color: currentColor;
    content: "";
    display: inline-block;
    height: 16px;
    margin-left: 2px;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 16px;
  }

  div.default-theme ol,
  div.default-theme ul {
    margin: 0.6em 0;
  }

  div.default-theme ol li,
  div.default-theme ul li {
    line-height: 1.6;
    margin: 0.5em 0;
  }

  div.default-theme p {
    line-height: 1.6;
    margin: 0.5rem 0;
  }

  .md-editor div.default-theme {
    --md-theme-quote-border: 5px solid #35b378;
    --md-theme-quote-bg-color: var(--md-theme-bg-color-inset);
  }

  div.default-theme blockquote {
    display: flow-root;
    line-height: 2em;
    margin: 20px 0;
    padding: 0 1.2em;
  }

  .md-editor default-theme {
    --md-theme-table-stripe-color: #fafafa;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) default-theme {
    --md-theme-table-stripe-color: #0c0c0c;
  }

  div.default-theme table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    margin-top: 1em;
    overflow: auto;
  }

  div.default-theme table tr td,
  div.default-theme table tr th {
    word-wrap: break-word;
    padding: 8px 14px;
  }

  div.default-theme table tbody tr:hover {
    background-color: var(--md-theme-color-hover);
  }

  div.default-theme blockquote table {
    line-height: normal;
  }

  div.default-theme blockquote table tr td,
  div.default-theme blockquote table tr th {
    border-color: var(--md-theme-border-color-inset);
  }

  div.default-theme blockquote table tbody tr:nth-child(n) {
    background-color: inherit;
  }

  div.default-theme blockquote table tbody tr:hover {
    background-color: var(--md-theme-color-hover-inset);
  }

  .md-editor div.vuepress-theme {
    --md-theme-code-inline-color: #d63200;
    --md-theme-code-inline-bg-color: #f8f8f8;
    --md-theme-code-block-color: #747384;
    --md-theme-code-block-bg-color: #f8f8f8;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: 2px;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.vuepress-theme {
    --md-theme-code-inline-color: #e06c75;
    --md-theme-code-inline-bg-color: #1a1a1a;
    --md-theme-code-block-color: #999;
    --md-theme-code-block-bg-color: #1a1a1a;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: 2px;
  }

  div.vuepress-theme code {
    margin: 0 2px;
    padding: 3px 5px;
  }

  div.vuepress-theme .md-editor-code pre {
    font-size: 0.875em;
    margin: 0 0 1em;
  }

  div.vuepress-theme .md-editor-code pre code {
    margin: 0;
    padding: 22px 1em;
    white-space: pre;
  }

  div.vuepress-theme .md-editor-code pre code span[rn-wrapper] {
    top: 22px;
  }

  .md-editor div.vuepress-theme {
    --md-theme-heading-color: #273849;
    --md-theme-heading-2-border: 1px solid var(--md-theme-border-color);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.vuepress-theme {
    --md-theme-heading-color: #999;
    --md-theme-heading-2-border: 1px solid var(--md-theme-border-color);
  }

  div.vuepress-theme h1,
  div.vuepress-theme h2,
  div.vuepress-theme h3,
  div.vuepress-theme h4,
  div.vuepress-theme h5,
  div.vuepress-theme h6 {
    font-weight: 600;
    line-height: 1.45;
    margin-top: 1em;
    position: relative;
  }

  div.vuepress-theme h1 {
    font-size: 2.2em;
    margin: 1em 0;
  }

  div.vuepress-theme h2 {
    font-size: 1.65em;
    padding-bottom: 0.3em;
  }

  div.vuepress-theme h3 {
    line-height: 1.35em;
  }

  .md-editor div.vuepress-theme {
    --md-theme-link-color: #42b983;
  }

  div.vuepress-theme a {
    font-weight: 600;
  }

  div.vuepress-theme ol,
  div.vuepress-theme ul {
    line-height: 1.4em;
    margin: 1.2em 0;
    position: relative;
    z-index: 1;
  }

  div.vuepress-theme ol li,
  div.vuepress-theme ul li {
    margin: 1.2em 0;
  }

  div.vuepress-theme p {
    line-height: 1.6em;
    margin: 1.2em 0;
    position: relative;
    word-spacing: 0.05em;
  }

  .md-editor div.vuepress-theme {
    --md-theme-quote-border: 4px solid #42b983;
  }

  div.vuepress-theme blockquote {
    margin: 2em 0;
    padding-left: 20px;
  }

  div.vuepress-theme blockquote p {
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 1.2em;
    padding: 0;
  }

  .md-editor div.vuepress-theme {
    --md-theme-table-td-border-color: #dfe2e5;
    --md-theme-table-stripe-color: #f6f8fa;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.vuepress-theme {
    --md-theme-table-td-border-color: #2d2d2d;
    --md-theme-table-stripe-color: #0c0c0c;
  }

  div.vuepress-theme table {
    border-collapse: collapse;
    display: block;
    margin: 1rem 0;
    overflow-x: auto;
  }

  div.vuepress-theme table tr td,
  div.vuepress-theme table tr th {
    padding: 0.6em 1em;
  }

  .md-editor div.vuepress-theme {
    --md-theme-color: #304455;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.vuepress-theme {
    --md-theme-color: #999;
  }

  div.vuepress-theme {
    color: var(--md-theme-color);
    font-size: 16px;
  }

  div.vuepress-theme em {
    color: #4f5959;
    padding: 0 6px 0 4px;
  }

  .md-editor div.github-theme {
    --md-theme-code-inline-color: inherit;
    --md-theme-code-inline-bg-color: #eff1f2;
    --md-theme-code-inline-radius: 6px;
    --md-theme-code-block-color: inherit;
    --md-theme-code-block-bg-color: #f6f8fa;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: 6px;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-code-inline-color: #c9d1d9;
    --md-theme-code-inline-bg-color: #2d3339;
    --md-theme-code-inline-radius: 6px;
    --md-theme-code-block-color: #a9b7c6;
    --md-theme-code-block-bg-color: #161b22;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: 6px;
  }

  div.github-theme code {
    margin: 0;
    padding: 0.2em 0.4em;
  }

  div.github-theme pre code {
    letter-spacing: 1px;
    margin-bottom: 0;
    padding: 22px 1em;
    word-break: normal;
  }

  .md-editor div.github-theme {
    --md-theme-heading-color: inherit;
    --md-theme-heading-6-color: #2d3339;
    --md-theme-heading-1-border: 1px solid #d9dee4;
    --md-theme-heading-2-border: 1px solid #d9dee4;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-heading-color: #c9d1d9;
    --md-theme-heading-6-color: #768390;
    --md-theme-heading-1-border: 1px solid #373e47;
    --md-theme-heading-2-border: 1px solid #373e47;
  }

  div.github-theme h1,
  div.github-theme h2,
  div.github-theme h3,
  div.github-theme h4,
  div.github-theme h5,
  div.github-theme h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 16px;
    margin-top: 24px;
  }

  div.github-theme h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
  }

  div.github-theme h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
  }

  div.github-theme h3 {
    font-size: 1.25em;
  }

  div.github-theme h4 {
    font-size: 1em;
  }

  div.github-theme h5 {
    font-size: 0.875em;
  }

  div.github-theme h6 {
    font-size: 0.85em;
  }

  .md-editor div.github-theme {
    --md-theme-heading-bg-color: #fff;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-heading-bg-color: #22272e;
  }

  div.github-theme img {
    background-color: var(--md-theme-heading-bg-color);
  }

  .md-editor div.github-theme {
    --md-theme-link-color: #539bf5;
    --md-theme-link-hover-color: #539bf5;
  }

  div.github-theme a:hover {
    text-decoration: underline;
  }

  div.github-theme ol li + li,
  div.github-theme ul li + li {
    margin-top: 0.25em;
  }

  .md-editor div.github-theme {
    --md-theme-quote-color: #57606a;
    --md-theme-quote-border: 0.25em solid #d0d7de;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-quote-color: #8b949e;
    --md-theme-quote-border: 0.25em solid #444c56;
  }

  div.github-theme blockquote {
    margin: 0;
    padding: 0 1em;
  }

  .md-editor div.github-theme {
    --md-theme-table-stripe-color: #f7f8fa;
    --md-theme-table-tr-bg-color: #fff;
    --md-theme-table-td-border-color: #d0d7de;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-table-stripe-color: #161b22;
    --md-theme-table-tr-bg-color: transparent;
    --md-theme-table-td-border-color: #30363d;
  }

  div.github-theme table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    max-width: 100%;
    overflow: auto;
  }

  div.github-theme table tr td,
  div.github-theme table tr th {
    padding: 6px 13px;
  }

  .md-editor div.github-theme {
    --md-theme-color: #222;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.github-theme {
    --md-theme-color: #c9d1d9;
  }

  div.github-theme {
    color: var(--md-theme-color);
    line-height: 1.5;
  }

  div.github-theme blockquote,
  div.github-theme details,
  div.github-theme dl,
  div.github-theme ol,
  div.github-theme p,
  div.github-theme pre,
  div.github-theme table,
  div.github-theme ul {
    margin-bottom: 16px;
    margin-top: 0;
  }

  .md-editor div.cyanosis-theme,
  .dark\:md-editor-dark:where(.dark, .dark *) div.cyanosis-theme {
    --md-theme-code-inline-color: var(--md-theme-code-color);
    --md-theme-code-inline-bg-color: var(--md-theme-code-bg-color);
    --md-theme-code-block-color: var(--md-theme-base-color);
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
  }

  div.cyanosis-theme code {
    font-family:
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
    overflow-x: auto;
    padding: 0.065em 0.4em;
  }

  div.cyanosis-theme code::-moz-selection {
    background-color: var(--md-theme-slct-codebg-color);
  }

  div.cyanosis-theme code::selection {
    background-color: var(--md-theme-slct-codebg-color);
  }

  div.cyanosis-theme .md-editor-code pre {
    font-family:
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
  }

  div.cyanosis-theme .md-editor-code pre code {
    line-height: 1.75;
    margin: 0;
    padding: 11px 12px 22px;
    word-break: normal;
  }

  div.cyanosis-theme .md-editor-code pre code span[rn-wrapper] {
    top: 11px;
  }

  .md-editor div.cyanosis-theme {
    --md-theme-heading-color: var(--md-theme-title-color);
  }

  div.cyanosis-theme h1 {
    font-size: 30px;
    padding-bottom: 4px;
  }

  div.cyanosis-theme h1,
  div.cyanosis-theme h2 {
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 36px;
    transition: color 0.35s;
  }

  div.cyanosis-theme h2 {
    border-bottom: 1px solid var(--md-theme-border-color-2);
    font-size: 24px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }

  div.cyanosis-theme h2:before {
    content: "「";
    left: -14px;
    position: absolute;
    top: -6px;
  }

  div.cyanosis-theme h2:after {
    content: "」";
    position: relative;
    right: auto;
    top: 6px;
  }

  div.cyanosis-theme h3 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 30px;
    padding-bottom: 0;
    padding-left: 6px;
    position: relative;
    transition: color 0.35s;
  }

  div.cyanosis-theme h3:before {
    color: var(--md-theme-strong-color);
    content: "»";
    padding-right: 6px;
  }

  div.cyanosis-theme h4 {
    font-size: 16px;
    margin-top: 24px;
  }

  div.cyanosis-theme h4,
  div.cyanosis-theme h5 {
    line-height: 1.5;
    margin-bottom: 10px;
    padding-bottom: 0;
    padding-left: 6px;
    transition: color 0.35s;
  }

  div.cyanosis-theme h5 {
    font-size: 14px;
    margin-top: 18px;
  }

  div.cyanosis-theme h6 {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 12px;
    padding-bottom: 0;
    padding-left: 6px;
    transition: color 0.35s;
  }

  div.cyanosis-theme h1::-moz-selection,
  div.cyanosis-theme h2::-moz-selection,
  div.cyanosis-theme h3::-moz-selection,
  div.cyanosis-theme h4::-moz-selection,
  div.cyanosis-theme h5::-moz-selection,
  div.cyanosis-theme h6::-moz-selection {
    background-color: var(--md-theme-slct-titlebg-color);
    color: var(--md-theme-slct-title-color);
  }

  div.cyanosis-theme h1::selection,
  div.cyanosis-theme h2::selection,
  div.cyanosis-theme h3::selection,
  div.cyanosis-theme h4::selection,
  div.cyanosis-theme h5::selection,
  div.cyanosis-theme h6::selection {
    background-color: var(--md-theme-slct-titlebg-color);
    color: var(--md-theme-slct-title-color);
  }

  @media (max-width: 720px) {
    div.cyanosis-theme h1 {
      font-size: 24px;
    }

    div.cyanosis-theme h2 {
      font-size: 20px;
    }

    div.cyanosis-theme h3 {
      font-size: 18px;
    }
  }

  .md-editor div.cyanosis-theme {
    --md-theme-link-color: var(--md-theme-link-color);
    --md-theme-link-hover-color: var(--md-theme-linkh-color);
  }

  div.cyanosis-theme a {
    border-bottom: 1px solid var(--md-theme-border-color);
    display: inline-block;
    position: relative;
    text-decoration: none;
  }

  div.cyanosis-theme a:hover {
    border-bottom-color: var(--md-theme-linkh-color);
  }

  div.cyanosis-theme a:active {
    color: var(--md-theme-linkh-color);
  }

  div.cyanosis-theme a:after {
    border-bottom: 1px solid var(--md-theme-border-color);
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transform: translateZ(0);
    transition:
      top 0.3s,
      opacity 0.3s;
    width: 100%;
  }

  div.cyanosis-theme a:hover:after {
    border-bottom-color: var(--md-theme-linkh-color);
    opacity: 1;
    top: 0;
  }

  div.cyanosis-theme ol,
  div.cyanosis-theme ul {
    margin: 0;
  }

  div.cyanosis-theme ol li,
  div.cyanosis-theme ul li {
    list-style: inherit;
    margin-bottom: 0;
  }

  div.cyanosis-theme ol li .task-list-item,
  div.cyanosis-theme ul li .task-list-item {
    list-style: none;
  }

  div.cyanosis-theme ol li .task-list-item ol,
  div.cyanosis-theme ol li .task-list-item ul,
  div.cyanosis-theme ul li .task-list-item ol,
  div.cyanosis-theme ul li .task-list-item ul {
    margin-top: 0;
  }

  div.cyanosis-theme ol ol,
  div.cyanosis-theme ol ul,
  div.cyanosis-theme ul ol,
  div.cyanosis-theme ul ul {
    margin-top: 4px;
  }

  div.cyanosis-theme ol li {
    padding-left: 6px;
  }

  div.cyanosis-theme ol li::-moz-selection,
  div.cyanosis-theme ul li::-moz-selection {
    background-color: var(--md-theme-slct-bg-color);
    color: var(--md-theme-slct-text-color);
  }

  div.cyanosis-theme ol li::selection,
  div.cyanosis-theme ul li::selection {
    background-color: var(--md-theme-slct-bg-color);
    color: var(--md-theme-slct-text-color);
  }

  div.cyanosis-theme .task-list-item-checkbox {
    position: relative;
  }

  div.cyanosis-theme .contains-task-list input[type="checkbox"]:before {
    background: #f0f8ff;
    border: 1px solid #add6ff;
    border-radius: var(--md-theme-radius-s);
    bottom: 0;
    box-sizing: border-box;
    content: "";
    height: inherit;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: inherit;
    z-index: 1;
  }

  div.cyanosis-theme .contains-task-list input[type="checkbox"][checked]:after {
    bottom: 0;
    color: #f55;
    content: "✓";
    font-size: 20px;
    font-weight: 700;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: -12px;
    width: 0;
    z-index: 2;
  }

  div.cyanosis-theme p {
    line-height: inherit;
    margin-bottom: 16px;
    margin-top: 16px;
  }

  div.cyanosis-theme p::-moz-selection {
    background-color: var(--md-theme-slct-bg-color);
    color: var(--md-theme-slct-text-color);
  }

  div.cyanosis-theme p::selection {
    background-color: var(--md-theme-slct-bg-color);
    color: var(--md-theme-slct-text-color);
  }

  .md-editor div.cyanosis-theme {
    --md-theme-quote-color: var(--md-theme-blockquote-color);
    --md-theme-quote-border: 4px solid var(--md-theme-strong-color);
    --md-theme-quote-bg-color: var(--md-theme-blockquote-bg-color);
  }

  div.cyanosis-theme blockquote {
    margin: 22px 0;
    padding: 1px 20px;
    transition: color 0.35s;
  }

  div.cyanosis-theme blockquote:after {
    content: "";
    display: block;
  }

  div.cyanosis-theme blockquote > p {
    margin: 10px 0;
  }

  div.cyanosis-theme blockquote > b,
  div.cyanosis-theme blockquote > strong {
    color: var(--md-theme-strong-color);
  }

  div.cyanosis-theme table {
    border: 1px solid var(--md-theme-table-border-color);
    border-collapse: collapse;
    border-spacing: 0;
    display: inline-block !important;
    max-width: 100%;
    overflow: auto;
    width: auto;
  }

  div.cyanosis-theme table thead {
    background: #f6f6f6;
    color: #000;
    text-align: left;
  }

  div.cyanosis-theme table tr:nth-child(2n) {
    background-color: var(--md-theme-table-tr-nc-color);
  }

  div.cyanosis-theme table tr:hover {
    background-color: var(--md-theme-table-trh-color);
  }

  div.cyanosis-theme table td,
  div.cyanosis-theme table th {
    border: 1px solid var(--md-theme-table-border-color);
    line-height: 24px;
    padding: 12px 8px;
  }

  div.cyanosis-theme table th {
    background-color: var(--md-theme-table-th-color);
    color: var(--md-theme-table-tht-color);
  }

  div.cyanosis-theme table td {
    min-width: 120px;
  }

  div.cyanosis-theme table thead th::-moz-selection {
    background-color: transparent;
  }

  div.cyanosis-theme table thead th::selection {
    background-color: transparent;
  }

  div.cyanosis-theme table tbody td::-moz-selection {
    background-color: var(--md-theme-slct-bg-color);
  }

  div.cyanosis-theme table tbody td::selection {
    background-color: var(--md-theme-slct-bg-color);
  }

  .md-editor div.cyanosis-theme {
    --md-theme-base-color: #353535;
    --md-theme-title-color: #005bb7;
    --md-theme-strong-color: #2196f3;
    --md-theme-em-color: #4fc3f7;
    --md-theme-del-color: #ccc;
    --md-theme-link-color: #3da8f5;
    --md-theme-linkh-color: #007fff;
    --md-theme-border-color: #bedcff;
    --md-theme-border-color-2: #ececec;
    --md-theme-bg-color: #fff;
    --md-theme-blockquote-color: #8c8c8c;
    --md-theme-blockquote-bg-color: #f0fdff;
    --md-theme-code-color: #c2185b;
    --md-theme-code-bg-color: #fff4f4;
    --md-theme-code-block-bg-color: #f8f8f8;
    --md-theme-table-border-color: #c3e0fd;
    --md-theme-table-th-color: #dff0ff;
    --md-theme-table-tht-color: #005bb7;
    --md-theme-table-tr-nc-color: #f7fbff;
    --md-theme-table-trh-color: #e0edf7;
    --md-theme-slct-title-color: #005bb7;
    --md-theme-slct-titlebg-color: rgba(175, 207, 247, 0.25);
    --md-theme-slct-text-color: #c80000;
    --md-theme-slct-bg-color: rgba(175, 207, 247, 0.25);
    --md-theme-slct-del-color: #999;
    --md-theme-slct-elbg-color: #e8ebec;
    --md-theme-slct-codebg-color: #ffeaeb;
    --md-theme-slct-prebg-color: rgba(160, 200, 255, 0.25);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.cyanosis-theme {
    --md-theme-base-color: #cacaca;
    --md-theme-title-color: #ddd;
    --md-theme-strong-color: #fe9900;
    --md-theme-em-color: #ffd28e;
    --md-theme-del-color: #ccc;
    --md-theme-link-color: #ffb648;
    --md-theme-linkh-color: #fe9900;
    --md-theme-border-color: #ffe3ba;
    --md-theme-border-color-2: #ffcb7b;
    --md-theme-bg-color: #2f2f2f;
    --md-theme-blockquote-color: #c7c7c7;
    --md-theme-blockquote-bg-color: rgba(255, 199, 116, 0.1);
    --md-theme-code-color: #000;
    --md-theme-code-bg-color: #ffcb7b;
    --md-theme-code-block-bg-color: rgba(30, 25, 18, 0.5);
    --md-theme-table-border-color: #fe9900;
    --md-theme-table-th-color: #ffb648;
    --md-theme-table-tht-color: #000;
    --md-theme-table-tr-nc-color: #6d5736;
    --md-theme-table-trh-color: #947443;
    --md-theme-slct-title-color: #000;
    --md-theme-slct-titlebg-color: #fe9900;
    --md-theme-slct-text-color: #00c888;
    --md-theme-slct-bg-color: rgba(175, 207, 247, 0.25);
    --md-theme-slct-del-color: #999;
    --md-theme-slct-elbg-color: #000;
    --md-theme-slct-codebg-color: #ffcb7b;
    --md-theme-slct-prebg-color: rgba(160, 200, 255, 0.25);
  }

  div.cyanosis-theme {
    color: var(--md-theme-base-color);
    font-weight: 400;
    line-height: 1.75;
    overflow-x: hidden;
    transition: color 0.35s;
    word-break: break-word;
  }

  div.cyanosis-theme hr {
    background-image: linear-gradient(
      90deg,
      var(--md-theme-link-color),
      rgba(255, 0, 0, 0.3),
      rgba(37, 163, 65, 0.3),
      rgba(255, 0, 0, 0.3),
      var(--md-theme-link-color)
    );
    border-width: 0;
    height: 1px;
    margin-bottom: 32px;
    margin-top: 32px;
    overflow: visible;
    position: relative;
    width: 98%;
  }

  div.cyanosis-theme b,
  div.cyanosis-theme strong {
    color: var(--md-theme-strong-color);
  }

  div.cyanosis-theme em,
  div.cyanosis-theme i {
    color: var(--md-theme-em-color);
  }

  div.cyanosis-theme del {
    color: var(--md-theme-del-color);
  }

  div.cyanosis-theme details > summary {
    border-bottom: 1px solid var(--md-theme-border-color);
    color: var(--md-theme-title-color);
    cursor: pointer;
    font-size: 20px;
    font-weight: bolder;
    outline: none;
  }

  div.cyanosis-theme details > p {
    background-color: var(--md-theme-blockquote-bg-color);
    border: 2px dashed var(--md-theme-strong-color);
    color: #666;
    margin: 10px 0 0;
    padding: 10px 20px;
  }

  div.cyanosis-theme a::-moz-selection,
  div.cyanosis-theme b::-moz-selection,
  div.cyanosis-theme em::-moz-selection,
  div.cyanosis-theme i::-moz-selection,
  div.cyanosis-theme strong::-moz-selection {
    background-color: var(--md-theme-slct-elbg-color);
  }

  div.cyanosis-theme a::selection,
  div.cyanosis-theme b::selection,
  div.cyanosis-theme em::selection,
  div.cyanosis-theme i::selection,
  div.cyanosis-theme strong::selection {
    background-color: var(--md-theme-slct-elbg-color);
  }

  div.cyanosis-theme del::-moz-selection {
    background-color: var(--md-theme-slct-elbg-color);
    color: var(--md-theme-slct-del-color);
  }

  div.cyanosis-theme del::selection {
    background-color: var(--md-theme-slct-elbg-color);
    color: var(--md-theme-slct-del-color);
  }

  .md-editor div.mk-cute-theme,
  .dark\:md-editor-dark:where(.dark, .dark *) div.mk-cute-theme {
    --md-theme-code-inline-color: #4ec9b0;
    --md-theme-code-inline-bg-color: #282c34;
    --md-theme-code-block-color: #4ec9b0;
    --md-theme-code-block-bg-color: #282c34;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
    --md-theme-code-block-radius: 10px;
  }

  div.mk-cute-theme code {
    font-family:
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
    margin: 0 4px;
    overflow-x: auto;
    padding: 0.14em 0.46em;
  }

  div.mk-cute-theme .md-editor-code pre code {
    font-family:
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
    line-height: 1.75;
    margin: 0;
    padding: 22px;
    word-break: normal;
  }

  div.mk-cute-theme .md-editor-code pre code span[rn-wrapper] {
    top: 22px;
  }

  .md-editor div.mk-cute-theme {
    --md-theme-heading-color: #36ace1;
  }

  div.mk-cute-theme h1:before,
  div.mk-cute-theme h2:before,
  div.mk-cute-theme h3:before,
  div.mk-cute-theme h4:before,
  div.mk-cute-theme h5:before,
  div.mk-cute-theme h6:before {
    animation: spin 2s linear 0s infinite;
    background-image: url();
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
  }

  div.mk-cute-theme h1 {
    font-size: 30px;
    margin: 30px 0;
    padding: 12px 38px;
    position: relative;
  }

  div.mk-cute-theme h1:before {
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
  }

  div.mk-cute-theme h2 {
    font-size: 24px;
    margin: 28px 0;
    padding: 12px 36px;
    position: relative;
  }

  div.mk-cute-theme h2:before {
    background-size: 28px 28px;
    height: 28px;
    width: 28px;
  }

  div.mk-cute-theme h3 {
    font-size: 18px;
    margin: 26px 0;
    padding: 4px 32px;
    position: relative;
  }

  div.mk-cute-theme h3:before {
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
  }

  div.mk-cute-theme h4 {
    font-size: 16px;
    margin: 22px 0;
    padding: 4px 28px;
    position: relative;
  }

  div.mk-cute-theme h4:before {
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
  }

  div.mk-cute-theme h5 {
    font-size: 15px;
    margin: 20px 0;
    padding: 4px 26px;
    position: relative;
  }

  div.mk-cute-theme h5:before {
    background-size: 18px 18px;
    height: 18px;
    width: 18px;
  }

  div.mk-cute-theme h6 {
    font-size: 14px;
    margin: 16px 0;
    padding: 4px 22px;
    position: relative;
  }

  div.mk-cute-theme h6:before {
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
  }

  @media (max-width: 720px) {
    div.mk-cute-theme h1 {
      font-size: 24px;
    }

    div.mk-cute-theme h2 {
      font-size: 20px;
    }

    div.mk-cute-theme h3 {
      font-size: 18px;
    }
  }

  .md-editor div.mk-cute-theme {
    --md-theme-link-color: #409eff;
    --md-theme-link-hover-color: #007bff;
  }

  div.mk-cute-theme a {
    border-bottom: 1px solid #409eff;
    display: inline-block;
  }

  div.mk-cute-theme a:active,
  div.mk-cute-theme a:hover {
    border-bottom: 1px solid #007bff;
  }

  div.mk-cute-theme ol li,
  div.mk-cute-theme ul li {
    list-style: inherit;
    margin-bottom: 0;
  }

  div.mk-cute-theme ol li .task-list-item,
  div.mk-cute-theme ul li .task-list-item {
    list-style: none;
  }

  div.mk-cute-theme ol li .task-list-item ol,
  div.mk-cute-theme ol li .task-list-item ul,
  div.mk-cute-theme ul li .task-list-item ol,
  div.mk-cute-theme ul li .task-list-item ul {
    margin-top: 0;
  }

  div.mk-cute-theme ol ol,
  div.mk-cute-theme ol ul,
  div.mk-cute-theme ul ol,
  div.mk-cute-theme ul ul {
    margin-top: 3px;
  }

  div.mk-cute-theme ol li {
    padding-left: 6px;
  }

  div.mk-cute-theme p {
    line-height: inherit;
    margin-bottom: 22px;
    margin-top: 22px;
  }

  .md-editor div.mk-cute-theme {
    --md-theme-quote-color: #fff;
    --md-theme-quote-border: 4px solid #409eff;
    --md-theme-quote-bg-color: rgba(54, 172, 225, 0.75);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.mk-cute-theme {
    --md-theme-quote-color: inherit;
    --md-theme-quote-border: 4px solid #265d97;
    --md-theme-quote-bg-color: rgba(18, 80, 108, 0.75);
  }

  div.mk-cute-theme blockquote {
    border-radius: var(--md-theme-radius-m);
    margin: 16px 0;
    padding: 8px 26px;
    position: relative;
  }

  div.mk-cute-theme blockquote:before {
    color: #409eff;
    content: "❝";
    font-size: 20px;
    font-weight: 700;
    left: 8px;
    line-height: 1;
    opacity: 0.7;
    position: absolute;
    top: 10px;
  }

  div.mk-cute-theme blockquote:after {
    bottom: 0;
    color: #409eff;
    content: "❞";
    font-size: 20px;
    opacity: 0.7;
    position: absolute;
    right: 8px;
  }

  div.mk-cute-theme blockquote ol li,
  div.mk-cute-theme blockquote ul li,
  div.mk-cute-theme blockquote > p {
    color: var(--md-theme-quote-color);
  }

  .md-editor div.mk-cute-theme {
    --md-theme-table-color: #000;
    --md-theme-table-border-color: #f6f6f6;
    --md-theme-table-thead-bg-color: #f6f6f6;
    --md-theme-table-stripe-color: #fcfcfc;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.mk-cute-theme {
    --md-theme-table-color: inherit;
    --md-theme-table-border-color: #1c1c1c;
    --md-theme-table-thead-bg-color: rgba(28, 28, 28, 0.631);
    --md-theme-table-stripe-color: rgba(28, 28, 28, 0.631);
  }

  div.mk-cute-theme table {
    border: 1px solid var(--md-theme-table-border-color);
    display: inline-block;
    max-width: 100%;
    overflow: auto;
    width: auto;
  }

  div.mk-cute-theme table thead {
    background-color: var(--md-theme-table-thead-bg-color);
    color: var(--md-theme-table-color);
    text-align: left;
  }

  div.mk-cute-theme table tr td,
  div.mk-cute-theme table tr th {
    border: none;
    line-height: 24px;
    padding: 12px 7px;
  }

  div.mk-cute-theme table tr td {
    min-width: 120px;
  }

  div.mk-cute-theme blockquote table tbody {
    color: var(--md-theme-color);
  }

  div.mk-cute-theme blockquote table tr {
    background-color: var(--md-theme-table-stripe-color);
  }

  @keyframes spin {
    0% {
      transform: rotate(0);
    }

    to {
      transform: rotate(1turn);
    }
  }

  .md-editor div.mk-cute-theme {
    --md-theme-color: #36ace1;
    background-image: linear-gradient(
        90deg,
        rgba(50, 58, 66, 0.25) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(50, 58, 66, 0.25) 3%, transparent 0);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.mk-cute-theme {
    background-image: linear-gradient(
        90deg,
        rgba(217, 234, 251, 0.25) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(217, 234, 251, 0.25) 3%, transparent 0);
    --md-theme-bg-color-scrollbar-thumb: #4d4d4d;
  }

  div.mk-cute-theme {
    background-position: 50%;
    background-size: 20px 20px;
    font-weight: 400;
    line-height: 1.75;
    overflow-x: hidden;
    word-break: break-word;
  }

  div.mk-cute-theme hr {
    background-image: linear-gradient(90deg, #36ace1, #dff0fe, #36ace1);
    border: none;
    height: 1px;
    margin-bottom: 32px;
    margin-top: 32px;
    overflow: visible;
    position: relative;
    width: 98%;
  }

  div.mk-cute-theme del {
    color: #36ace1;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-code-inline-color: #d63200;
    --md-theme-code-inline-bg-color: #fff5f5;
    --md-theme-code-block-color: #333;
    --md-theme-code-block-bg-color: #f8f8f8;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.smart-blue-theme {
    --md-theme-code-inline-color: #e06c75;
    --md-theme-code-inline-bg-color: #1a1a1a;
    --md-theme-code-block-color: #999;
    --md-theme-code-block-bg-color: #1a1a1a;
    --md-theme-code-before-bg-color: var(--md-theme-code-block-bg-color);
  }

  div.smart-blue-theme code {
    overflow-x: auto;
    padding: 0.065em 0.4em;
  }

  div.smart-blue-theme .md-editor-code pre {
    font-family:
      Menlo,
      Monaco,
      Consolas,
      Courier New,
      monospace;
  }

  div.smart-blue-theme .md-editor-code pre code {
    margin: 0;
    padding: 22px 12px;
    word-break: normal;
  }

  div.smart-blue-theme .md-editor-code pre code span[rn-wrapper] {
    top: 22px;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-heading-color: #135ce0;
  }

  div.smart-blue-theme h1,
  div.smart-blue-theme h2,
  div.smart-blue-theme h3,
  div.smart-blue-theme h4,
  div.smart-blue-theme h5,
  div.smart-blue-theme h6 {
    margin: 0;
    padding: 30px 0;
  }

  div.smart-blue-theme h1 a,
  div.smart-blue-theme h2 a,
  div.smart-blue-theme h3 a,
  div.smart-blue-theme h4 a,
  div.smart-blue-theme h5 a,
  div.smart-blue-theme h6 a {
    border: none;
  }

  div.smart-blue-theme h1 {
    font-size: 22px;
    margin: 50px 0;
    position: relative;
    text-align: center;
  }

  div.smart-blue-theme h2 {
    border-left: 4px solid;
    font-size: 20px;
    margin: 30px 0;
    padding: 0 0 0 10px;
    position: relative;
  }

  div.smart-blue-theme h3 {
    font-size: 16px;
  }

  div.smart-blue-theme img {
    margin: 0 auto;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-link-color: #036aca;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.smart-blue-theme {
    --md-theme-link-color: #2d7dc7;
  }

  div.smart-blue-theme a {
    font-weight: 400;
  }

  div.smart-blue-theme ol,
  div.smart-blue-theme ul {
    margin-top: 1em;
  }

  div.smart-blue-theme li {
    line-height: 2;
    list-style: inherit;
    margin-bottom: 0;
  }

  div.smart-blue-theme p {
    font-weight: 400;
    line-height: 2;
  }

  div.smart-blue-theme * + p {
    margin-top: 16px;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-quote-color: #666;
    --md-theme-quote-bg-color: #fff9f9;
    --md-theme-quote-border-color: #b2aec5;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.smart-blue-theme {
    --md-theme-quote-color: #999;
    --md-theme-quote-bg-color: #2a2a2a;
    --md-theme-quote-border-color: #0063bb;
  }

  div.smart-blue-theme blockquote {
    background-color: var(--md-theme-quote-bg-color);
    border-left: 4px solid var(--md-theme-quote-border-color);
    margin: 2em 0;
    padding: 2px 20px;
  }

  div.smart-blue-theme blockquote p {
    color: var(--md-theme-quote-color);
    line-height: 2;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-table-td-border-color: #dfe2e5;
    --md-theme-table-stripe-color: #f6f8fa;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.smart-blue-theme {
    --md-theme-table-td-border-color: #2d2d2d;
    --md-theme-table-stripe-color: #0c0c0c;
  }

  div.smart-blue-theme table {
    border-collapse: collapse;
    margin: 1rem 0;
    overflow-x: auto;
  }

  div.smart-blue-theme table tr td,
  div.smart-blue-theme table tr th {
    padding: 0.6em 1em;
  }

  div.smart-blue-theme blockquote table {
    line-height: normal;
  }

  div.smart-blue-theme blockquote table tr td,
  div.smart-blue-theme blockquote table tr th {
    border-color: var(--md-theme-border-color-inset);
  }

  div.smart-blue-theme blockquote table tbody tr:nth-child(n) {
    background-color: inherit;
  }

  .md-editor div.smart-blue-theme {
    --md-theme-color: #595959;
    background-image: linear-gradient(
        90deg,
        rgba(60, 10, 30, 0.04) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(60, 10, 30, 0.04) 3%, transparent 0);
  }

  .dark\:md-editor-dark:where(.dark, .dark *) div.smart-blue-theme {
    --md-theme-color: #999;
    background-image: linear-gradient(90deg, #cfcfcf0a 3%, #fff0 0),
      linear-gradient(1turn, #cfcfcf0a 3%, #fff0 0);
  }

  div.smart-blue-theme {
    background-position: 50%;
    background-size: 20px 20px;
    color: var(--md-theme-color);
    font-family:
      -apple-system,
      system-ui,
      BlinkMacSystemFont,
      Helvetica Neue,
      PingFang SC,
      Hiragino Sans GB,
      Microsoft YaHei,
      Arial,
      sans-serif;
  }

  div.smart-blue-theme em strong,
  div.smart-blue-theme strong {
    color: #036aca;
  }

  div.smart-blue-theme hr {
    border-top: 1px solid #135ce0;
  }

  .md-editor-checkbox {
    background-color: var(--md-bk-color-outstand);
    border: 1px solid var(--md-border-color);
    border-radius: 2px;
    cursor: pointer;
    height: 12px;
    line-height: 1;
    text-align: center;
    width: 12px;
  }

  .md-editor-checkbox:after {
    content: "";
    font-weight: 700;
  }

  .md-editor-checkbox-checked:after {
    content: "✓";
  }

  .md-editor-divider {
    background-color: var(--md-border-color);
    display: inline-block;
    height: 0.9em;
    margin: 0 8px;
    position: relative;
    top: 0.1em;
    width: 1px;
  }
  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-table-shape-col-default {
    background-color: #222;
  }

  .dark\:md-editor-dark:where(.dark, .dark *)
    .md-editor-table-shape-col-include {
    background-color: #555;
  }
  .md-editor-catalog-editor {
    --md-color: #3f4a54;
    --md-hover-color: #000;
    --md-bk-color: #fff;
    --md-bk-color-outstand: #f2f2f2;
    --md-bk-hover-color: #f5f7fa;
    --md-border-color: #e6e6e6;
    --md-border-hover-color: #b9b9b9;
    --md-border-active-color: #999;
    --md-modal-mask: #00000073;
    --md-modal-shadow: 0px 6px 24px 2px #00000019;
    --md-scrollbar-bg-color: #e2e2e2;
    --md-scrollbar-thumb-color: #0000004d;
    --md-scrollbar-thumb-hover-color: #00000059;
    --md-scrollbar-thumb-active-color: #00000061;
    /* background-color: var(--md-bk-color); */
    border-left: 1px solid var(--md-border-color);
    box-sizing: border-box;
    font-feature-settings: "tnum";
    font-size: 14px;
    font-variant: tabular-nums;
    height: 100%;
    line-height: 1.5715;
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 5px 10px;
    /* width: 200px; */
    z-index: 10002;
  }

  .md-editor-catalog-fixed {
    position: absolute;
    right: 0;
    top: 0;
  }

  .md-editor-catalog-flat {
    flex-shrink: 0;
    position: static;
  }

  .md-editor-catalog-indicator {
    background-color: #73d13d;
    border-radius: 4px;
    height: 18px;
    position: absolute;
    transition: top 0.3s;
    width: 4px;
  }

  .md-editor-catalog > .md-editor-catalog-link {
    padding: 5px 8px;
  }

  .md-editor-catalog-link {
    display: flex;
    flex-direction: column;
    padding: 5px 0 5px 1em;
  }

  .md-editor-catalog-link span {
    color: var(--md-color);
    cursor: pointer;
    display: inline-block;
    line-height: 18px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    transition: color 0.3s;
    white-space: nowrap;
    width: 100%;
  }

  .md-editor-catalog-link span:hover {
    color: #73d13d;
  }

  .md-editor-catalog-wrapper > .md-editor-catalog-link {
    padding-bottom: 5px;
    padding-top: 5px;
  }

  .md-editor-catalog-wrapper > .md-editor-catalog-link:first-of-type {
    padding-top: 10px;
  }

  .md-editor-catalog-wrapper > .md-editor-catalog-link:last-of-type {
    padding-bottom: 0;
  }

  .md-editor-catalog-active > span {
    color: #73d13d;
  }
  .dark\:md-editor-catalog-dark:where(.dark, .dark *) {
    --md-color: #999;
    --md-hover-color: #bbb;
    --md-bk-color: #000;
    --md-bk-color-outstand: #333;
    --md-bk-hover-color: #1b1a1a;
    --md-border-color: #2d2d2d;
    --md-border-hover-color: #636262;
    --md-border-active-color: #777;
    --md-modal-mask: #00000073;
    --md-modal-shadow: 0px 6px 24px 2px #00000066;
    --md-scrollbar-bg-color: #0f0f0f;
    --md-scrollbar-thumb-color: #2d2d2d;
    --md-scrollbar-thumb-hover-color: #3a3a3a;
    --md-scrollbar-thumb-active-color: #3a3a3a;
  }

  .md-editor {
    --md-color: #3f4a54;
    --md-hover-color: #000;
    --md-bk-color: #fff;
    --md-bk-color-outstand: #f2f2f2;
    --md-bk-hover-color: #f5f7fa;
    --md-border-color: #e6e6e6;
    --md-border-hover-color: #b9b9b9;
    --md-border-active-color: #999;
    --md-modal-mask: #00000073;
    --md-modal-shadow: 0px 6px 24px 2px #00000019;
    --md-scrollbar-bg-color: #e2e2e2;
    --md-scrollbar-thumb-color: #0000004d;
    --md-scrollbar-thumb-hover-color: #00000059;
    --md-scrollbar-thumb-active-color: #00000061;
    /* background-color: var(--md-bk-color);
    border: 1px solid var(--md-border-color); */
    box-sizing: border-box;
    color: var(--md-color);
    display: flex;
    flex-direction: column;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI Variable,
      Segoe UI,
      system-ui,
      ui-sans-serif,
      Helvetica,
      Arial,
      sans-serif,
      Apple Color Emoji,
      Segoe UI Emoji;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .md-editor ::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  .md-editor ::-webkit-scrollbar-corner,
  .md-editor ::-webkit-scrollbar-track {
    background-color: var(--md-scrollbar-bg-color);
  }

  .md-editor ::-webkit-scrollbar-thumb {
    background-color: var(--md-scrollbar-thumb-color);
    border-radius: 2px;
  }

  .md-editor ::-webkit-scrollbar-button:vertical {
    display: none;
  }

  .md-editor ::-webkit-scrollbar-thumb:vertical:hover {
    background-color: var(--md-scrollbar-thumb-hover-color);
  }

  .md-editor ::-webkit-scrollbar-thumb:vertical:active {
    background-color: var(--md-scrollbar-thumb-active-color);
  }

  .md-editor .md-editor-fullscreen {
    bottom: 0;
    height: auto !important;
    left: 0;
    position: fixed !important;
    right: 0;
    top: 0;
    width: auto !important;
    z-index: 10000;
  }

  svg.md-editor-icon {
    height: 16px;
    padding: 4px;
    width: 16px;
    fill: none;
    box-sizing: content-box;
    display: block;
    overflow: hidden;
  }

  .md-editor .lucide-list-icon,
  .md-editor .lucide-list-ordered-icon,
  .md-editor .lucide-list-todo-icon {
    height: 18px;
    padding: 3px;
    width: 18px;
  }

  .md-editor-preview-wrapper {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
    position: relative;
  }

  .md-editor-preview {
    display: flow-root;
    font-size: 16px;
    padding: 10px 20px;
    word-break: break-all;
  }

  .dark\:md-editor-dark:where(.dark, .dark *){
    --md-color: #999;
    --md-hover-color: #bbb;
    --md-bk-color: #000;
    --md-bk-color-outstand: #333;
    --md-bk-hover-color: #1b1a1a;
    --md-border-color: #2d2d2d;
    --md-border-hover-color: #636262;
    --md-border-active-color: #777;
    --md-modal-mask: #00000073;
    --md-modal-shadow: 0px 6px 24px 2px #00000066;
    --md-scrollbar-bg-color: #0f0f0f;
    --md-scrollbar-thumb-color: #2d2d2d;
    --md-scrollbar-thumb-hover-color: #3a3a3a;
    --md-scrollbar-thumb-active-color: #3a3a3a;
  }

  .md-editor-fullscreen {
    bottom: 0;
    height: auto !important;
    left: 0;
    position: fixed !important;
    right: 0;
    top: 0;
    width: auto !important;
    z-index: 10000;
  }

  .md-editor .arknights-theme,
  .dark\:md-editor-dark:where(.dark, .dark *) .arknights-theme {
    --md-theme-code-inline-color: #f06;
    --md-theme-code-inline-bg-color: var(--area);
    --md-theme-code-block-color: var(--text);
    --md-theme-code-block-bg-color: var(--area);
  }

  .arknights-theme code {
    font-size: 0.87em;
    margin: 0 4px;
    overflow-x: auto;
    padding: 0.065em 0.4em;
    position: relative;
    word-break: break-word;
  }

  .arknights-theme .md-editor-code {
    border: 1px solid var(--border);
  }

  .arknights-theme .md-editor-code:before {
    border-left: 8px solid var(--yellow);
    border-top: 8px solid var(--yellow);
    content: "";
    height: 20px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 20px;
    z-index: 10;
  }

  .arknights-theme .md-editor-code:after {
    border-bottom: 8px solid var(--blue);
    border-right: 8px solid var(--blue);
    bottom: -4px;
    content: "";
    height: 20px;
    position: absolute;
    right: -4px;
    width: 20px;
    z-index: 10;
  }

  .arknights-theme .md-editor-code pre {
    font-family:
      -apple-system,
      system-ui,
      Menlo,
      Monaco,
      Consolas,
      Courier New;
    line-height: 1.75 !important;
    margin: 0;
    position: relative;
  }

  .arknights-theme .md-editor-code pre code {
    display: block;
    font-size: 14px;
    line-height: 1.75 !important;
    margin: 0;
    overflow-x: auto;
    padding: 26px 12px;
    position: unset !important;
    word-break: normal;
  }

  .arknights-theme .md-editor-code pre:nth-child(odd):before {
    border-left-color: var(--green);
    border-top-color: var(--green);
  }

  .arknights-theme .md-editor-code pre:nth-child(odd):after {
    border-bottom-color: var(--purple);
    border-right-color: var(--purple);
  }

  .arknights-theme .code-tabs pre {
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .arknights-theme h1,
  .arknights-theme h2,
  .arknights-theme h3,
  .arknights-theme h4,
  .arknights-theme h5,
  .arknights-theme h6 {
    color: var(--text);
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 35px;
    padding-bottom: 0;
    padding-left: 8px;
  }

  .arknights-theme h1 {
    font-size: 30px;
    margin-bottom: 5px;
  }

  .arknights-theme h2 {
    font-size: 24px;
    position: relative;
  }

  .arknights-theme h2:after {
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .arknights-theme h3 {
    font-size: 18px;
    padding-bottom: 0;
  }

  .arknights-theme h4 {
    font-size: 16px;
  }

  .arknights-theme h5 {
    font-size: 15px;
  }

  .arknights-theme h6 {
    margin-top: 5px;
  }

  .arknights-theme img {
    max-width: 100%;
  }

  .arknights-theme a {
    color: var(--blue);
    display: inline-block;
    margin: 0 4px;
    position: relative;
    text-decoration: none;
    transition: 0.3s;
    vertical-align: bottom;
  }

  .arknights-theme a:before {
    background-color: #1fb3ff;
    bottom: 90%;
    box-sizing: border-box;
    color: #fff;
    content: "READ MORE +";
    font-family:
      -apple-system,
      system-ui,
      Menlo,
      Monaco,
      Consolas,
      Courier New;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transition: 0.3s;
    white-space: nowrap;
    width: 130px;
  }

  .arknights-theme a:after {
    border-bottom: 1px dashed var(--blue);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .arknights-theme a:active:before,
  .arknights-theme a:hover:before {
    max-width: 130px;
    padding-left: 14px;
  }

  .arknights-theme ol,
  .arknights-theme ul {
    padding-left: 28px;
  }

  .arknights-theme ol li,
  .arknights-theme ul li {
    line-height: 2em;
    list-style: inherit;
    margin-bottom: 0;
  }

  .arknights-theme ol li .task-list-item,
  .arknights-theme ul li .task-list-item {
    list-style: none;
  }

  .arknights-theme ol li .task-list-item ol,
  .arknights-theme ol li .task-list-item ul,
  .arknights-theme ul li .task-list-item ol,
  .arknights-theme ul li .task-list-item ul {
    margin-top: 0;
  }

  .arknights-theme ol li::marker,
  .arknights-theme ul li::marker {
    color: var(--blue);
  }

  .arknights-theme ol ol,
  .arknights-theme ol ul,
  .arknights-theme ul ol,
  .arknights-theme ul ul {
    margin-top: 3px;
  }

  .arknights-theme ol ol li,
  .arknights-theme ol ul li,
  .arknights-theme ul ol li,
  .arknights-theme ul ul li {
    border-bottom: none;
  }

  .arknights-theme ol li {
    list-style: decimal-leading-zero;
    padding-left: 6px;
  }

  .arknights-theme p {
    line-height: inherit;
    margin-bottom: 22px;
    margin-top: 22px;
  }

  .arknights-theme blockquote {
    background-color: var(--area);
    border: 1px solid var(--border-blue);
    margin: 22px 0;
    padding: 12px 23px 2px;
    position: relative;
  }

  .arknights-theme blockquote > p {
    margin: 10px 0;
  }

  .arknights-theme blockquote:after {
    background-color: var(--blue);
    color: #fff;
    content: "FROM";
    left: 0;
    text-align: center;
    width: 40px;
  }

  .arknights-theme blockquote:after,
  .arknights-theme blockquote:before {
    font-size: 12px;
    font-weight: lighter;
    line-height: 1;
    padding: 2px 0;
    pointer-events: none;
    position: absolute;
    top: 0;
  }

  .arknights-theme blockquote:before {
    color: var(--blue);
    content: "CITATION";
    left: 44px;
  }

  .arknights-theme table {
    background-color: var(--table-bg-color);
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 1em;
    max-width: 100%;
    overflow: auto;
    width: 100%;
  }

  .arknights-theme table tr:hover td,
  .arknights-theme table tr:hover th {
    border-bottom: 1px solid var(--yellow);
  }

  .arknights-theme thead {
    text-align: left;
  }

  .arknights-theme tbody tr:nth-child(2n-1) {
    background-color: #e0e0e01a;
  }

  .arknights-theme th {
    border-bottom: 1px dashed var(--line);
    font-size: 1.2em;
  }

  .arknights-theme td,
  .arknights-theme th {
    line-height: 24px;
    padding: 12px 7px;
  }

  .arknights-theme td {
    border-bottom: 1px solid var(--table-bg-color);
    min-width: 120px;
  }

  .md-editor .arknights-theme {
    --bg-color: hsla(0, 0%, 88%, 0.1);
    --blue: #37b2ff;
    --yellow: #feea1e;
    --orange: orange;
    --purple: #e699e6;
    --green: #a7ecad;
    --text: #333;
    --area: #f8f8f8;
    --line: #adb0b8;
    --border: #f5f5f7;
    --border-blue: #37b2ff;
    --table-bg-color: #fff;
  }

  .dark\:md-editor-dark:where(.dark, .dark *) .arknights-theme {
    --bg-color: hsla(0, 0%, 88%, 0.1);
    --blue: #37b2ff;
    --yellow: #feea1e;
    --orange: orange;
    --purple: #e699e6;
    --green: #a7ecad;
    --text: #c9d1d9;
    --area: #1a1a1a;
    --line: #75787e;
    --border: #4e4e4e;
    --border-blue: #2781b9;
    --table-bg-color: var(--area);
  }

  .arknights-theme {
    background-image: linear-gradient(
        90deg,
        rgba(217, 234, 251, 0.25) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(217, 234, 251, 0.25) 3%, transparent 0);
    background-position: 50%;
    background-size: 20px 20px;
    color: var(--text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
    word-break: break-word;
  }

  .arknights-theme hr {
    background-image: linear-gradient(
      to left,
      var(--blue) 0,
      var(--blue) 25%,
      transparent 50%
    );
    background-size: 4px 1px;
    border: none;
    height: 1px;
    margin-bottom: 32px;
    margin-top: 32px;
  }

  .arknights-theme input[type="checkbox"] {
    position: relative;
  }

  .arknights-theme input[type="checkbox"]:before {
    background: #f0f8ff;
    border: 1px solid #add6ff;
    border-radius: 2px;
    bottom: 0;
    box-sizing: border-box;
    content: "";
    height: inherit;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: inherit;
    z-index: 1;
  }

  .arknights-theme input[type="checkbox"]:checked:after {
    border-bottom: 2px solid var(--blue);
    border-left: 2px solid var(--blue);
    color: var(--blue);
    content: "";
    height: 40%;
    left: 18%;
    position: absolute;
    top: 10%;
    transform: rotate(-45deg);
    width: 90%;
    z-index: 2;
  }

  @media (max-width: 720px) {
    .arknights-theme h1 {
      font-size: 24px;
    }

    .arknights-theme h2 {
      font-size: 20px;
    }

    .arknights-theme h3 {
      font-size: 18px;
    }
  }

  [class*="arknights-theme md-editor-scrn"] span[rn-wrapper] {
    top: 26px;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    // 初始化代码高亮
    if (window.hljs) {
      // 转换代码块结构
      function transformCodeBlocks() {
        // 查找所有需要转换的代码块
        const simpleCodeBlocks = document.querySelectorAll(".code-header pre");
        simpleCodeBlocks.forEach((pre) => {
          const parent = pre.parentElement;
          const code = pre.querySelector("code");
          if (!code) return;

          const language =
            code.getAttribute("class")?.replace("language-", "") || "css";
          const codeContent = code.innerHTML;

          // 创建新的markdown编辑器风格代码块
          const details = document.createElement("details");
          details.className = "md-editor-code";
          details.setAttribute("open", "");

          // 创建summary部分
          const summary = document.createElement("summary");
          summary.className = "md-editor-code-head";

          // 创建flag部分
          const flag = document.createElement("div");
          flag.className = "md-editor-code-flag";
          flag.innerHTML = "<span></span><span></span><span></span>";

          // 创建action部分
          const action = document.createElement("div");
          action.className = "md-editor-code-action";

          // 创建语言标识
          const langSpan = document.createElement("span");
          langSpan.className = "md-editor-code-lang";
          langSpan.textContent = language;

          // 创建复制按钮
          const copyBtn = document.createElement("span");
          copyBtn.className = "md-editor-copy-button";
          copyBtn.setAttribute("data-tips", "复制代码");
          copyBtn.textContent = "复制代码";

          // 创建折叠按钮
          const collapseBtn = document.createElement("span");
          collapseBtn.className = "md-editor-collapse-tips";
          collapseBtn.innerHTML =
            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-chevron-left md-editor-icon"><circle cx="12" cy="12" r="10"/><path d="m14 16-4-4 4-4"/></svg>';

          // 组装action部分
          action.appendChild(langSpan);
          action.appendChild(copyBtn);
          action.appendChild(collapseBtn);

          // 组装summary部分
          summary.appendChild(flag);
          summary.appendChild(action);

          // 创建pre部分
          const newPre = document.createElement("pre");
          const newCode = document.createElement("code");
          newCode.className = `language-${language}`;
          newCode.setAttribute("language", language);
          newCode.innerHTML = `<span class="md-editor-code-block"><span class="language-${language}">${codeContent}</span></span>`;
          newPre.appendChild(newCode);

          // 组装details部分
          details.appendChild(summary);
          details.appendChild(newPre);

          // 替换原来的代码块
          parent.innerHTML = "";
          parent.appendChild(details);

          // 为复制按钮添加事件
          copyBtn.addEventListener("click", (e) => {
            e.preventDefault();
            e.stopPropagation();
            navigator.clipboard.writeText(codeContent).then(() => {
              copyBtn.textContent = "复制成功！";
              setTimeout(() => {
                copyBtn.textContent = "复制代码";
              }, 2000);
            });
          });
        });
      }

      // 只高亮.md-editor-code-block span下面的代码
      function highlightCodeBlockSpans() {
        const codeBlockSpans = document.querySelectorAll(
          ".md-editor-code-block span",
        );
        codeBlockSpans.forEach((span) => {
          hljs.highlightElement(span);
        });
      }

      // 为代码块添加行号
      function addLineNumbers() {
        const codeBlocks = document.querySelectorAll(".md-editor-code-block");
        codeBlocks.forEach((block) => {
          // 获取高亮后的代码内容
          const codeContent = block.textContent;
          // 计算行数
          const lines = codeContent.split("\n").length;

          // 创建行号容器
          const lineNumbersContainer = document.createElement("span");
          lineNumbersContainer.setAttribute("rn-wrapper", "");
          lineNumbersContainer.setAttribute("aria-hidden", "true");

          // 创建行号span元素
          for (let i = 0; i < lines; i++) {
            const lineSpan = document.createElement("span");
            lineNumbersContainer.appendChild(lineSpan);
          }

          // 将行号容器添加到代码块中
          block.appendChild(lineNumbersContainer);
        });
      }

      // 转换代码块结构
      transformCodeBlocks();
      // 高亮所有.md-editor-code-block span下面的代码
      highlightCodeBlockSpans();
      // 为代码块添加行号
      addLineNumbers();

      // 监听DOM变化，为动态加载的代码块添加高亮、结构转换和行号
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
              if (node.tagName === "CODE" || node.querySelector("code")) {
                highlightCodeBlockSpans();
                transformCodeBlocks();
                addLineNumbers();
              }
            }
          });
        });
      });

      // 观察文章内容区域的变化
      const articleContent = document.getElementById("article-content");
      if (articleContent) {
        observer.observe(articleContent, {
          childList: true,
          subtree: true,
        });
      }
    }

    // 全屏API兼容性处理
    const fullscreenAPI = {
      request: (element) => {
        if (element.requestFullscreen) return element.requestFullscreen();
        if (element.webkitRequestFullscreen)
          return element.webkitRequestFullscreen();
        return false;
      },
      exit: () => {
        if (document.exitFullscreen) return document.exitFullscreen();
        if (document.webkitExitFullscreen)
          return document.webkitExitFullscreen();
        return false;
      },
      get isActive() {
        return !!document.fullscreenElement;
      },
    };

    // 获取所有代码块
    const codeBlocks = document.querySelectorAll(".md-editor-code");

    // 存储所有全屏按钮，用于全局全屏状态变化时更新
    const fullscreenButtons = new Map();

    // 全局全屏变化监听器 - 只添加一次
    document.addEventListener("fullscreenchange", () => {
      fullscreenButtons.forEach((button) => {
        button.textContent = fullscreenAPI.isActive ? "退出全屏" : "全屏";
      });
    });

    // 防抖函数
    const debounce = (func, delay) => {
      let timeoutId;
      return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
      };
    };

    codeBlocks.forEach((block) => {
      // 查找代码块的 action 容器
      const actionContainer = block.querySelector(".md-editor-code-action");
      if (!actionContainer) return;

      // 添加全屏按钮功能
      addFullscreenButton(block, actionContainer);

      // 优化复制按钮功能
      enhanceCopyButton(actionContainer);
    });

    // 添加全屏按钮
    function addFullscreenButton(block, actionContainer) {
      const fullscreenButton = document.createElement("span");
      fullscreenButton.className = "md-editor-fullscreen-button";
      fullscreenButton.textContent = "全屏";

      // 存储按钮引用
      fullscreenButtons.set(block, fullscreenButton);

      // 插入到 action 容器中
      actionContainer.appendChild(fullscreenButton);

      // 绑定全屏事件
      fullscreenButton.addEventListener("click", (event) => {
        // 阻止默认行为和冒泡
        event.preventDefault();
        event.stopPropagation();

        if (!fullscreenAPI.isActive) {
          fullscreenAPI.request(block);
        } else {
          fullscreenAPI.exit();
        }
      });
    }

    // 优化复制按钮
    function enhanceCopyButton(actionContainer) {
      const copyButton = actionContainer.querySelector(
        ".md-editor-copy-button",
      );
      if (!copyButton) return;

      // 使用防抖优化重置功能
      const resetCopyButtonText = debounce(() => {
        copyButton.textContent = "复制代码";
      }, 2000);

      copyButton.addEventListener("click", (event) => {
        // 阻止默认行为和冒泡
        event.preventDefault();
        event.stopPropagation();

        const codeBlock = copyButton.closest(".md-editor-code");
        const codeElement = codeBlock?.querySelector("code");
        if (!codeElement) return;

        navigator.clipboard
          .writeText(codeElement.textContent)
          .then(() => {
            copyButton.textContent = "复制成功！";
            resetCopyButtonText();
          })
          .catch((err) => {
            console.error("复制失败:", err);
            // 失败时也重置文本，避免按钮显示异常状态
            resetCopyButtonText();
          });
      });
    }
  });
</script>

<article id="article-content" class="md-editor dark:md-editor-dark">
  <ItemContent
    classStyle="${'post-content md-editor-preview arknights-theme md-editor-scrn'}"
  >
    <slot />
  </ItemContent>
</article>
